<template>
	<view class="qiun-columns">
		<view class="add-top font-weight-bold know-flex konw-column  color-FFFFFF " :style="{paddingTop:`${statusBarHeight}px`}"
		 :class="selectIndex==0?'bg-base1':'bg-base'">
			<view class="know-flex know-space-between know-align-end">
				<view class="add-top-title know-flex know-space-between font-50 know-align-end">
					<block>
						<view v-for="(item,index) in titleText" :key="index" @click="selectFun(index)" :class="selectIndex==index?'font-60':'noselectClass'">
							{{item}}
						</view>
					</block>
				</view>
				<view @click="back">
					<image src="/static/out.png" mode="" class="add-top-out"></image>
				</view>
			</view>
			<view class="know-flex know-align-center konw-center  know-all">
				<view>
					<text style="padding-bottom:20rpx;">￥</text>
					<text class="font-100">{{num||0}}</text>
				</view>
			</view>
		</view>

		<view class="chartsBox">
			<view class="qiun-charts">
				<view class="picker-charts ">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" fields="month" class="">
						<view class="index-top-head-imgBox know-flex know-align-center konw-center">
							<text class="font-28 color-333333 font-weight-bold index-top-head-text">{{setTime |splitFun }}</text>
						</view>
					</picker>
				</view>

				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="canvasRing" id="canvasRing" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
				 @touchstart="touchRing"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
				<canvas canvas-id="canvasRing" id="canvasRing" class="charts"></canvas>
				<!--#endif-->
			</view>
		</view>
		<view class="setUpList">
			<view class="font-50 font-weight-bold color-black3">设置</view>
			<view class="quota font-weight-bold color-black3">
				<view class="color-black3 font-30">每月额度</view>
				<view class="know-flex know-align-center">
					<input v-model="quota" placeholder="请输入每月额度" class="know-all font-30 quota-input" />
					<view :class="selectIndex==0?'color-base1 ':' color-base'" class="font-30" @click="setQuotaFun">设置</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import {
		getTotal,
		setQuota,
		getUserInfo
	} from "@/api/http/login.js"
	var _self;
	var canvaRing = null;
	import {
		getOutAndInType,
		addUserRecord
	} from "@/api/http/login.js"
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				statusBarHeight: 0,
				titleText: ['支出', '收入'],
				selectIndex: 0,
				date: currentDate,
				num: 0,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				chartData: [],
				quota: 0,
				userInfo: {},
				setTime: '',
				state:true
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: res => {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(690);
			this.cHeight = uni.upx2px(500);
			this.getServerData();


			getUserInfo().then(res => {
				this.userInfo = res.data
				this.quota = res.data.quota
			})

		},
		onShow() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		mounted() {
			let timeArr = this.date.split("-")
			let setTime = `${timeArr[0]}-${timeArr[1]}`
			this.setTime = setTime
			this.getServerData();
		},
		methods: {
			setQuotaFun() {
				setQuota({
					quota: this.quota
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "设置成功",
							icon: 'none'
						})
					}
				})
			},
			//选择日期
			bindDateChange(e) {
				this.setTime = e.target.value
				this.getServerData()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			selectFun(index) {
				this.selectIndex = index
				this.getServerData()
			},

			back() {
				uni.navigateBack()
			},



			//图表开始
			getServerData() {
				this.num = 0
				getTotal({
					outAndIn: this.selectIndex,
					yearAndMonth: this.setTime
				}).then(res => {
					let data = res.data
					var newArr = []
					data.forEach(v => {
						this.num += (v.money).toFixed(2) * 1
						let obj = {}
						obj.name = v['out_in_type'].name,
							obj.data = (v.money).toFixed(2) * 1
						// obj.icon = v['out_in_type'].icon
						newArr.push(obj)
					})
					this.chartData = newArr
					this.setChartData(newArr)
				})
			},


			setChartData(newArr) {
				let Ring = {
					series: newArr
				};
				//自定义文案示例，需设置format字段
				for (let i = 0; i < Ring.series.length; i++) {
					Ring.series[i].format = () => {
						return Ring.series[i].name + Ring.series[i].data * 1
					};
				}
				this.showRing('canvasRing', Ring)



				// uni.request({
				// 	url: 'https://www.ucharts.cn/data.json',
				// 	data:{
				// 	},
				// 	success: function(res) {
				// 		console.log(res.data.data)
				// 		let Ring={series:[]};
				// 		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// 		Ring.series=res.data.data.Ring.series;
				// 		//自定义文案示例，需设置format字段
				// 		for(let i = 0 ;i < Ring.series.length;i++){
				// 			Ring.series[i].format=()=>{return Ring.series[i].name+Ring.series[i].data};
				// 		}
				// 		_self.textarea = JSON.stringify(res.data.data.Ring);
				// 		_self.showRing("canvasRing",Ring);
				// 	},
				// 	fail: () => {
				// 		_self.tips="网络错误，小程序端请检查合法域名";
				// 	},
				// });




			},



			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					padding: [5, 5, 5, 5],
					legend: {
						show: false,
						position: 'right',
						float: 'center',
						itemGap: 10,
						padding: 5,
						lineHeight: 26,
						margin: 5,
						//backgroundColor:'rgba(41,198,90,0.2)',
						//borderColor :'rgba(41,198,90,0.5)',
						borderWidth: 1
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
					// subtitle: {
					// 	name: '70%',
					// 	color: '#7cb5ec',
					// 	fontSize: 25 * _self.pixelRatio,
					// },
					// title: {
					// 	name: '收益率',
					// 	color: '#666666',
					// 	fontSize: 15 * _self.pixelRatio,
					// },
					extra: {
						pie: {
							offsetAngle: 0,
							ringWidth: 40 * _self.pixelRatio,
							labelWidth: 15
						}
					},
				});
			},
		},
		filters: {
			splitFun(time) {
				let date = time.split("-")
				return `${date[0]}年${date[1]}月`
			}
		}
	}
</script>

<style lang="scss">
	.add {
		&-top {
			height: 500rpx;
			padding: 0 30rpx;

			&-title {
				width: 35%;
				padding-top: 10rpx;
			}

			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;

			&-out {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 690upx;
		height: 500upx;
		background-color: #FFFFFF;
		position: relative;
		box-shadow: 0rpx 0rpx 8rpx #EEEEEE;
	}

	.charts {
		width: 690upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.noselectClass {
		opacity: 0.5;
	}

	.chartsBox {
		padding: 0 30rpx;
		margin: 30rpx 0;
	}

	.quota {
		margin-top: 40rpx;

		&-input {
			border: 2rpx solid #EEEEEE;
			border-radius: 8rpx;
			padding: 15rpx 25rpx;
			margin-right: 30rpx;
		}
	}

	.quota view:first-child {
		margin-bottom: 30rpx;
	}

	.picker-charts {
		position: absolute;
		z-index: 998;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}



	.setUpList {
		margin-top: 40rpx;
		padding: 0 30rpx;
	}
</style>
